 <template>
    <div>
        <el-table ref="table" :data="tableData" :header-cell-style="getRowClass" border v-loading="loading">
            <el-table-column prop="date" :label="$t('m.label.images')" width="100">
                <template slot-scope="scope">
                    <img :src="scope.row.picture" alt srcset />
                </template>
            </el-table-column>
            <el-table-column prop="productModelNumber" :label="$t('m.label.productModelNumber')">
                <template slot-scope="scope">
                    <el-link
                        :href="'#/productCenter/productBasicInfo?model=' + scope.row.productModelNumber"
                    >{{ scope.row.productModelNumber }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="asin" :label="$t('m.label.ASIN')">
                <template slot-scope="scope">
                    <el-link :href="'#/productCenter/productBasicInfo?asin=' + scope.row.asin">{{ scope.row.asin}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="qty" sortable :label="$t('m.label.realTimeSales')"></el-table-column>
            <el-table-column prop="salesAmount" :label="$t('m.label.salesAmount')">
                <template slot-scope="scope">
                    <span v-if="scope.row.salesAmount !== null">{{symbol}}</span>
                    {{ scope.row.salesAmount }}
                </template>
            </el-table-column>
            <el-table-column prop="unitPrice" :label="$t('m.label.priceAvg')">
                <template slot-scope="scope">
                    <span v-if="scope.row.unitPrice  !== null">{{symbol}}</span>
                    {{ scope.row.unitPrice }}
                </template>
            </el-table-column>
            <el-table-column prop="qtyYes" sortable :label="$t('m.label.yesterdaySales')"></el-table-column>
            <el-table-column prop="salesAmountYes" :label="$t('m.label.yesterdayPrice')">
                <template slot-scope="scope">
                    <span v-if="scope.row.salesAmountYes  !== null">{{symbol}}</span>
                    {{ scope.row.salesAmountYes }}
                </template>
            </el-table-column>
            <el-table-column prop="unitPriceYes" :label="$t('m.label.yesterdAveragePrice')">
                <template slot-scope="scope">
                    <span v-if="scope.row.unitPriceYes  !== null">{{symbol}}</span>
                    {{ scope.row.unitPriceYes }}
                </template>
            </el-table-column>
            <el-table-column
                prop="qtyLk"
                sortable
                :label="$t('m.label.sameDaySaleslastWeek')"
                width="130"
            ></el-table-column>
            <el-table-column
                prop="salesAmountLk"
                :label="$t('m.label.sameDaySalesVolumeLastweek')"
                width="120"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.salesAmountLk  !== null">{{symbol}}</span>
                    {{ scope.row.salesAmountLk }}
                </template>
            </el-table-column>
            <el-table-column prop="inventory" :label="$t('m.label.amazonVendibility')"></el-table-column>
            <el-table-column prop="shiped" :label="$t('m.label.amazonPassage')"></el-table-column>
        </el-table>
        <scrollTable ref="scrollTable"></scrollTable>
    </div>
</template>

  <script>
const ERR_OK = 200;
import scrollTable from "components/scroll/scroll-table.vue";
export default {
    props: {
        country: Array
    },
    data() {
        return {
            loading: true,
            symbol: "",
            tableData: []
        };
    },
    mounted() {
        this.$refs.scrollTable.scrollShow(this.$refs.table)
    },
    methods: {
        getData(tab) {
            this.countrySymbol(tab.countryID);
            this.loading = true;
            this.$ajax
                .get(
                    this.GLOBAL.realTimeService +
                        "/SalesRealTime/getSalesRealTime?countryId=" +
                        tab.countryID +
                        "&businessUnit=" +
                        tab.activeName
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.tableData = res.data.data;
                    }
                    this.loading = false;
                });
        },
        countrySymbol(id) {
            this.symbol = this.country.find(item => item.id === id).symbol;
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        }
    },
    components: {
        scrollTable
    }
};
</script>